<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui" template="/templates/layout.xhtml">
	<ui:define name="head">
		<style type="text/css">
	    .ui-diagram-element {   
	        width:6em; 
	        height:4em;     
	        line-height:4em;
	        font-size: 16px;
	        font-weight: bold;
	        text-align: center;
	        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
	        border-radius: 4em;
	        border: 1px solid transparent;
	        background-color: #40E0D0;
	        color: #ffffff;
	    }
	    .ui-diagram-element:hover {
	        background-color: #D3D3D3;
	    }
	    
	    .flow-label {
	        font-size: 15px;
	        color: #816A51;
	    }
	    .ui-diagram-start {
			background-color: #8B0000;
			color: #ffffff;
			border-color: #7ab02c;
		}
		.ui-diagram-end {
			background-color: #8B0000;
			color: #ffffff;
			border-color: #7ab02c;
		}	 
		 .ui-diagram-focus {
			background-color: #00db00;
			font-weight: bold;
			color: blue;
			border-color: #00db00;
		}
	    .ui-diagram-success {
	        background-color: #9CB071;
	        color: #ffffff;
	        border-color: #7ab02c;
	    }	 
	    .ui-diagram-fail {
	        background-color: #C34A2C;
	        color: #ffffff;
	    }
	</style>
	</ui:define>
	<ui:define name="ptitle">流程实例管理</ui:define>
	<ui:define name="pcontent">
		<p:tabView id="tabview">

			<p:tab id="flowtab1" title="发布流程文件">
				<h:form id="frm1">
					<h:panelGrid>
						<p:fileUpload mode="advanced" dragDropSupport="false"
							label="流程文件选择" uploadLabel="文件上传" cancelLabel="取消上传"
							fileUploadListener="#{wfmProcessMgrMB.handleFileUpload}"
							update="messages dtDeploy" sizeLimit="10000000" fileLimit="3"
							allowTypes="/(\.|\/)(gif|jpe?g|png|xml|snaker)$/" />
						<p:growl id="messages" showDetail="true" />
					</h:panelGrid>
					
					<h:panelGrid columns="5" cellspacing="10">
						<p:outputLabel value="流程显示名称："></p:outputLabel>
						<p:inputText value="#{wfmProcessMgrMB.flowDisplayName}"></p:inputText>
						<p:commandButton value="查询" icon="ui-icon-search"
							update=":tabview:frm1:dtDeploy"
							action="#{wfmProcessMgrMB.queryFlowList}">
						</p:commandButton>
					</h:panelGrid>

					<p:dataTable id="dtDeploy" var="row"
						value="#{wfmProcessMgrMB.voList}" rows="10" paginator="true"
						paginatorPosition="bottom" rowsPerPageTemplate="5,10,15"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

						<f:facet name="header">
					      	流程定义查询
      					</f:facet>
						<p:column headerText="名称">
							<h:outputText value="#{row.name}" />
						</p:column>
						<p:column headerText="显示名称">
							<h:outputText value="#{row.displayName}" />
						</p:column>
						<p:column headerText="状态">
							<h:outputText value="#{row.state == 0 ? '启用' : '禁用'}&nbsp;" />
						</p:column>
						<p:column headerText="版本">
							<h:outputText value="#{row.version}&nbsp;" />
						</p:column>
						<p:column headerText="操作">
							<p:commandButton value="查" title="查看流程"
								update=":tabview:frm1:flowDetailPanel1" icon="ui-icon-search"
								action="#{wfmProcessMgrMB.handleShowProcess}">
								<f:setPropertyActionListener value="#{row}"
									target="#{wfmProcessMgrMB.selectedProcess}" />
							</p:commandButton>
						</p:column>

					</p:dataTable>

					<p:panel id="flowDetailPanel1" header="流程图示"
						style="margin-bottom:5px">
						<p:panelGrid rendered="#{not empty wfmProcessMgrMB.selectedProcess}">
							<p:diagram value="#{wfmProcessMgrMB.model}" style="height:400px"
								styleClass="ui-widget-content" />
						</p:panelGrid>
					</p:panel>
				</h:form>
			</p:tab>

			<p:tab id="flowtab2" title="启动流程实例">
				<h:form id="frm2">
					<h:panelGrid>
						<h:panelGrid columns="5" cellspacing="10">
							<p:outputLabel value="流程显示名称："></p:outputLabel>
							<p:inputText value="#{wfmProcessMgrMB.flowDisplayName}"></p:inputText>

							<p:commandButton value="查询" icon="ui-icon-search"
								update=":tabview:frm2:dtStart :tabview:frm2:msgs2"
								action="#{wfmProcessMgrMB.queryFlowList}">
							</p:commandButton>
						</h:panelGrid>
						<p:growl id="msgs2" showDetail="true" />

						<p:dataTable id="dtStart" var="row"
							value="#{wfmProcessMgrMB.voList}" rows="10" paginator="true"
							paginatorPosition="bottom" rowsPerPageTemplate="5,10,15"
							paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

							<f:facet name="header">
					      	流程启动
      					</f:facet>
							<p:column headerText="名称">
								<h:outputText value="#{row.name}" />
							</p:column>
							<p:column headerText="显示名称">
								<h:outputText value="#{row.displayName}" />
							</p:column>
							<p:column headerText="状态">
								<h:outputText value="#{row.state == 0 ? '启用' : '禁用'}&nbsp;" />
							</p:column>
							<p:column headerText="版本">
								<h:outputText value="#{row.version}&nbsp;" />
							</p:column>
							<p:column headerText="操作">
								<p:commandButton value="启" icon="ui-icon-flag"
									update=":tabview:frm2" title="启动流程实例"
									action="#{wfmProcessMgrMB.handleStartProcess}"
									rendered="#{ row.state == 0 }">
								</p:commandButton>
								<p:commandButton value="查" icon="ui-icon-search" title="查看流程"
									update=":tabview:frm2:flowDetailPanel2"
									action="#{wfmProcessMgrMB.handleShowProcess}">
									<f:setPropertyActionListener value="#{row}"
										target="#{wfmProcessMgrMB.selectedProcess}" />
								</p:commandButton>
							</p:column>

						</p:dataTable>
					</h:panelGrid>
					<p:panel id="flowDetailPanel2" header="流程图示"
						style="margin-bottom:5px">
						<p:panelGrid rendered="#{not empty wfmProcessMgrMB.selectedProcess}">
							<p:diagram value="#{wfmProcessMgrMB.model}" style="height:400px"
								styleClass="ui-widget-content" />
						</p:panelGrid>
					</p:panel>
				</h:form>
			</p:tab>

			<p:tab id="flowtab3" title="流程卸载与重载">
				<h:form id="frm3">
					<h:panelGrid>
						<h:panelGrid columns="5" cellspacing="10">
							<p:outputLabel value="流程显示名称："></p:outputLabel>
							<p:inputText value="#{wfmProcessMgrMB.flowDisplayName}"></p:inputText>

							<p:commandButton value="查询" icon="ui-icon-search"
								update=":tabview:frm3:dtUndeploy :tabview:frm3:msgs3"
								action="#{wfmProcessMgrMB.queryFlowList}">
							</p:commandButton>
						</h:panelGrid>
						<p:growl id="msgs3" showDetail="true" />

						<p:dataTable id="dtUndeploy" var="row"
							value="#{wfmProcessMgrMB.voList}" rows="10" paginator="true"
							paginatorPosition="bottom" rowsPerPageTemplate="5,10,15"
							paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

							<f:facet name="header">
					      	流程卸载
      					</f:facet>
							<p:column headerText="名称">
								<h:outputText value="#{row.name}" />
							</p:column>
							<p:column headerText="显示名称">
								<h:outputText value="#{row.displayName}" />
							</p:column>
							<p:column headerText="状态">
								<h:outputText value="#{row.state == 0 ? '启用' : '禁用'}&nbsp;" />
							</p:column>
							<p:column headerText="版本">
								<h:outputText value="#{row.version}&nbsp;" />
							</p:column>
							<p:column headerText="操作">
								<p:commandButton value="查" title="查看流程" icon="ui-icon-search"
									update=":tabview:frm3:flowDetailPanel3"
									action="#{wfmProcessMgrMB.handleShowProcess}">
									<f:setPropertyActionListener value="#{row}"
										target="#{wfmProcessMgrMB.selectedProcess}" />
								</p:commandButton>
								<p:commandButton value="卸" title="卸载流程" icon="ui-icon-locked"
									update=":tabview:frm3"
									action="#{wfmProcessMgrMB.handleUndeployProcess}"
									rendered="#{ row.state == 0 }">
									<f:setPropertyActionListener value="#{row}"
										target="#{wfmProcessMgrMB.selectedProcess}" />
								</p:commandButton>
								<p:commandButton value="重" title="重新发布" icon="ui-icon-unlocked"
									update=":tabview:frm3"
									action="#{wfmProcessMgrMB.handleRedeployProcess}"
									rendered="#{ row.state == 1 }">
									<f:setPropertyActionListener value="#{row}"
										target="#{wfmProcessMgrMB.selectedProcess}" />
								</p:commandButton>

							</p:column>

						</p:dataTable>
					</h:panelGrid>
					<p:panel id="flowDetailPanel3" header="流程图示"
						style="margin-bottom:5px">
						<p:panelGrid rendered="#{not empty wfmProcessMgrMB.selectedProcess}">
							<p:diagram value="#{wfmProcessMgrMB.model}" style="height:400px"
								styleClass="ui-widget-content" />
						</p:panelGrid>
					</p:panel>
				</h:form>
			</p:tab>

		</p:tabView>

	</ui:define>

</ui:composition>

